<template>
  <el-row style="padding-top: 100px; height: 100vh;" class="login">
    <el-col :span="8" :offset="8">
      <el-card class="card">
        <div class="text-center">
      <span slot="title" class="dialog-title">
        <img src="@/assets/NavBar/logo_u57Black.png" style="width: 100px">
      </span>
        </div>
        <h1 class="title">光伏组件故障分析系统</h1>
        <el-form ref="formData" class="usernameLogin text-center" :model="formData">
          <el-form-item :rules="{ required: true, message: '请输入用户名', trigger: 'blur'}" prop="username">
            <el-input v-model="formData.username" placeholder="请输入账号">
              <i
                slot="prefix"
                class="el-icon-user el-input__icon"
              />
            </el-input>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入密码', trigger: 'blur'}" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" type="password">
              <i
                slot="prefix"
                class="el-icon-lock el-input__icon"
              />
            </el-input>
          </el-form-item>
<!--          <el-form-item :rules="{ required: true, message: '请输入验证码', trigger: 'blur'}" prop="password">-->
<!--            <div style="display: flex">-->
<!--              <el-input v-model="formData.code" placeholder="请输入验证码" type="code">-->
<!--                <i-->
<!--                  slot="prefix"-->
<!--                  class="el-icon-lock el-input__icon"-->
<!--                />-->
<!--              </el-input>-->
<!--              <img src="xxxx" width="100px"/>-->
<!--            </div>-->
<!--          </el-form-item>-->
          <el-row class="text-center">
            <el-form-item>
<!--              <el-link type="primary" :underline="false" @click="gotoPhoneLoginPage">手机验证码登录</el-link>-->
<!--              <el-link type="primary" style="margin-left: 180px" :underline="false" :disabled="true" @click="gotoForgetPage">忘记密码</el-link>-->
            </el-form-item>
          </el-row>
          <el-row class="text-center">
            <el-form-item>
              <template>
                <el-button type="primary" style="width: 100%; font-size: 16px" @click="loginClickHandle">登录</el-button>
              </template>
            </el-form-item>
          </el-row>
        </el-form>

<!--        上传组件-->
<!--        <el-upload-->
<!--          class="upload-demo"-->
<!--          ref="upload"-->
<!--          :multiple="false"-->
<!--          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--          :show-file-list="false"-->
<!--          :auto-upload="false">-->
<!--          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
<!--          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
<!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--        </el-upload>-->
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import eventBus from "../../eventBus";

export default {
  name: "Login",
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    init() {},
    loginClickHandle() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/dologin', this.formData).then((data) => {
            this.$router.push({ path: "/indexPage" })
            // this.$router.push({ path: this.redirect || '/' })
          }).catch((e) => {
          })
        }
      })
    },
    submitUpload() {
      eventBus.$emit("uploadTask", this.$refs.upload.uploadFiles[this.$refs.upload.uploadFiles.length - 1])
    }
  }
}
</script>

<style lang="scss">
  .login{
      background: url("../../assets/login/slider1.png") no-repeat center;
      /*background: url("../../assets/login/loginBack.jpg") no-repeat center;*/
    /*background-size: 100% auto;*/
    /*.el-dialog, .el-pager li {*/
    /*  background-color: rgba(255,255,255,1)!important;*/
    /*}*/
    background-size: cover;
    .el-dialog, .el-dialog--center{
      border-radius: 8px!important;
    }
    .loginRegister {
      border-radius: 10px!important;
      .el-dialog, .el-pager li {
        /*background-color: rgb(1,58,103);*/
      }
      .el-dialog__title{
        color: black!important;
      }
      .el-dialog__header{
        padding: 0;
      }
      .el-dialog--center .el-dialog__body{
        padding-bottom: 0;
      }
    }
    .register{
      .el-dialog--center .el-dialog__body{
        padding: 0!important;
      }
    }
    .title{
      text-align: center;
      padding: 10px;
    }
    .el-card{
      padding: 40px 80px;
      /*background-color: #003A66;*/
      border: 0;
      box-shadow:0px 3px 14px 0px rgba(0,14,26,0.33)!important;
      border-radius:10px;
    }
  }
</style>
